<template>
	<view>
		<!-- custompop -->
		<u-popup :show.sync="pupshow_test" @close="headerClose" :round="20" mode="bottom">
			<view class="CustomPopBox">
				<view class="popheader FlexBetween">
					<view class="pclose u-flex" @click="headerClose">
						<u-icon name="close"></u-icon>
					</view>
					<view class="ptitle FlexItem">
						{{ptitle}}
					</view>
				</view>
				
				<view class="popContent">
					<slot name="content"></slot>
					<div class="popForm">
						
						<div class="form_line FlexBetween" >
							<div class="leftit">
								登录账号
							</div>
							<div class="right_area defFont FlexAlign">
								查询
								<view class="u-flex">
									<u-icon name="search" size="44"></u-icon>
								</view>
							</div>
						</div>
						<div class="form_line FlexBetween" >
							<div class="leftit">
								成员手机
							</div>
							<div class="right_area inputbox">
								<input type="text" placeholder="请输入成员手机号码">
							</div>
						</div>
						
						<div class="form_line FlexBetween" >
							<div class="leftit">
								部门
							</div>
							<div class="right_area selectBox FlexAlign">
								<div class="valtx">
									美的
								</div>
								<view class="u-flex">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</div>
						</div>
					</div>
				</view>
				
				<view class="bottom_mask"></view>
				<view class="CustomBottom FlexAlign">
					<view class="leftbtn delbtn" v-if="delbtn" @click="closeClick">
						{{deltxt}}
					</view>
					<view class="leftbtn" v-else  @click="closeClick">
						取消
					</view>
					<view class="saveBtn FlexRow FlexItem"  @click="saveClick">
						{{savetxt}}
					</view>
				</view>
			</view> 
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'custompop',
		props: {
			delbtn: {
				type: Boolean,
				default: false,
			},
			deltxt: {
				type: String,
				default: '删除',
			},
			savetxt: {
				type: String,
				default: '保存',
			},
			ptitle: {
				type: String,
				default: '弹窗',
			},
			
		},
		data(){
			return {
				pupshow_test: false,
			}
		},
		methods: {
			headerClose(){
				this.pupshow_test = false
			},
			saveClick(){
				this.headerClose()
				this.$emit('saveclick')
			},
			closeClick(){
				this.headerClose()
				this.$emit('closeclick')
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.CustomPopBox{
		max-height: 80vh;
		overflow: auto;
		border-radius: 20rpx 20rpx 0 0;
	}
	.popheader {
		padding: 30rpx 60rpx;
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 50;
		background: #fff;
		.pclose {
			width: 40rpx;
		}
		.ptitle {
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
		}
	}
	
	.popContent{
		width: 100%;
		padding: 0 60rpx;
	}
	
	.bottom_mask,.CustomBottom{
		width: 100%;
		height: 220rpx;
	}
	.CustomBottom{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 50;
		background: #fff;
		padding: 60rpx;
		.leftbtn{
			min-width: 240rpx;
			font-size: 36rpx;
			color: #999;
			text-align: center;
		}
		.delbtn{
			color: red;
		}
		.saveBtn{
			height: 100rpx;
			background: #fd7400;
			box-shadow: 0px 7px 40px  rgba(253, 112, 8, 0.2);
			border-radius: 16rpx;
			font-size: 36rpx;
			min-width: 400rpx;
			color: #fff;
			text-align: center;
		}
	}

	.popForm{
		width: 100%;
		.form_line{
			min-height: 110rpx;
		    padding: 0 30rpx;
		    margin-bottom: 30rpx;		    
			border: 1px solid #f5f5f5;
		    border-radius: 8rpx;
			&:last-of-type{
				margin-bottom: 0;
			}
			.leftit{
				font-size: 32rpx;
				color: #000;
				border: solid 1px red;
				min-width: 200rpx;
			}
			.right_area{
				flex: 1;
				text-align: right;
			}
			.defFont{
				font-size: 32rpx;
				color: #808080;
				text-align: right;
			}
			.inputbox{
				input{
					font-size: 32rpx;
					color: #808080;
					text-align: right;
				}
			}
			.selectBox{
				.valtx{
					font-size: 32rpx;
					color: #000;
					margin-right: 20rpx;
					text-align: right;
				}
			}
		}
	}
	   
						 
						
						 
						 
</style>